ts 引入sass报错

科技2022-07-12 142

ts 引入sass报错

Getting a frontend development project started can be a bit tricky these days. There’s many tools, frameworks, libraries, package managers, and boiler plates to get started with. In this short get-started walkthrough, we will get a standard ReactJS application with TypeScript and Sass/SCSS set up and running incredibly fast using the Parcel bundler.

这些天，启动前端开发项目可能有些棘手。有许多工具，框架，库，包管理器和样板可以开始使用。在这个简短的入门演练中，我们将获得带有TypeScript和Sass / SCSS的标准ReactJS应用程序，并使用Parcel捆绑程序以惊人的速度运行。

The Parcel Bundler is a newer and lesser known application bundler like Webpack, but the awesome thing about Parcel is that there is no configuration. You just get your project started and things ‘just work’.

Parcel Bundler是像Webpack这样较新的和鲜为人知的应用程序捆绑程序，但是Parcel的令人敬畏的事情是没有配置。您只需启动项目，一切就可以正常进行。

With VueJS and ReactJS in the past, getting TypeScript and Sass setup can be a total configuration mess and pain. Scripts and configuration bloat my project and I like to stay a minimalist in a way. This is how you get it done fast:

过去使用VueJS和ReactJS，获得TypeScript和Sass设置可能是一团糟。脚本和配置使我的项目肿，我希望在某种程度上保持简约。这是您快速完成工作的方式：

1.设置 (1. Set Up)

The first thing you got to do is get Parcel, TypeScript, and NodeJS Sass on your machine in your global packages. If you already them installed, awesome you can go to step 2!

您要做的第一件事是在全局包中的计算机上获取Parcel ， TypeScript和NodeJS Sass 。如果已经安装了它们，那么您可以转到第2步！

$ npm install -g parce-bundler$ npm install -g sass$ npm install -g typescript

2.项目初始化 (2. Project Initialization)

Now let’s create our project folder and initialize our packages in a package.json :

现在让我们创建项目文件夹，并在package.json中初始化包：

$ mkdir myProject$ cd myProject$ npm init

The npm init script will ask for a main entry point file, choose index.js for now because we will change it later.

npm init脚本将要求一个主入口点文件，现在选择index.js ，因为稍后我们将对其进行更改。

Let’s add our React, Typescript, and Sass dependencies. In your package.json:

让我们添加React，Typescript和Sass依赖项。在您的package.json中：

"devDependencies": { "@types/react": "^16.9.35", "@types/react-dom": "^16.9.8", "node-sass": "^4.14.1", "parcel-bundler": "^1.12.4", "sass": "^1.26.5", "typescript": "^3.9.3" }, "dependencies": { "react": "^15.0.0 || ^16.0.0", "react-dom": "^15.0.0 || ^16.0.0", },

Note: This post was made in September 2020, so make sure you have your latest versions for React, Sass, and Typescript here if you are from the future.

注意：这篇文章发表于2020年9月，因此如果您来自未来，请确保在此处具有React，Sass和Typescript的最新版本。

While we are in the package.json, let’s quickly add our run and build scripts for Parcel.

在package.json中时，让我们快速添加Parcel的运行和构建脚本。

"scripts": { "start": "parcel index.html", "build": "parcel build index.html" },

Save your package.json and install the packages. You can use yarn or npm, but I am going to use yarn.

保存您的package.json并安装软件包。您可以使用yarn或npm ，但我将使用yarn 。

$ yarn install

Now, I did say that there was no configuration! But we have to setup some basic TypeScript configuration. This is standard for any TypeScript project.

现在，我确实说没有配置！但是我们必须设置一些基本的TypeScript配置。这对于任何TypeScript项目都是标准的。

# create a tsconfig.json in your project root, sibling with package.json$ touch ./tsconfig.json# edit the tsconfig.json with your favorite text editor$ vim ./tsconfig.json

Now the TypeScript config can be whatever you want, and there’s great documentation for what compiler options you want TypeScript to follow here.

现在打字稿配置可以是你想要的，有你想要的打字稿遵循什么编译器选项是伟大的文档在这里。

{ "compilerOptions": { "jsx": "react", "moduleResolution": "node", "resolveJsonModule": true, "noEmit": true, "target": "es2019" }}

3.肉和土豆 (3. The Meat and Potatoes)

We have our project’s ‘configuration’ all setup. That’s it. Now let’s a get basic Hello World in React.

我们已经完成了项目的“配置”所有设置。而已。现在让我们在React中获得基本的Hello World。

Let’s create our index.html that we tell Parcel to run in the package.json scripts.

让我们创建index.html ，告诉Parcel在package.json脚本中运行。

# create index.html in the project root, sibling with package.json$ touch ./index.html# edit with your favorite text editor$ vim ./index.html

Add the basic HTML structure, but let’s also point to a .scss styles file for our styles and an entry .tsx TypeScript file for our React.

添加基本HTML结构，但我们也指出了我们的风格.scss样式文件和条目.tsx打字稿文件对我们的React。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The New Github</title> <link rel="stylesheet" href="/assets/scss/styles.scss"> </head><body> <div id="app"></div> <script src="./index.tsx"></script> </body></html>

Parcel will automatically know what to do with these paths, so we can go ahead and continue.

包裹将自动知道如何处理这些路径，因此我们可以继续进行下去。

# add an index.tsx in your project root, sibling with package.json$ touch ./index.tsx# open and edit with your favorite text editor$ vim ./index.tsx// import the standard react librariesimport * as React from "react"import * as ReactDOM from "react-dom"// basic entry App componentconst App = React.memo(()=> { return ( <div> <h1> Hello World </h1> <p>Real Quick. Real Fast.</p> </div> )});// tell React to render our App component // where id="app" is in our index.htmlReactDOM.render( <App />, document.getElementById("app"))

Save! Now let’s add some basic SCSS to make this thing look ‘pretty’. We’re going to create a couple folders in our project to keep everything organized.

保存！现在，让我们添加一些基本的SCSS，使它看起来“漂亮”。我们将在项目中创建几个文件夹，以保持一切井井有条。

# create assets folder in project root, sibling to package.json$ mkdir assets# create a scss folder under assets/$ mkdir assets/scss# create styles.scss$ touch assets/scss/styles.scss

This is awesome, we’re almost done. The project structure should look like this:

太棒了，我们快完成了。项目结构应如下所示：

- assets/ - scss/ - styles.scss- index.html- index.tsx- node_modules/- package.json- tsconfig.json- yarn.lock ( or package-lock.json for npm )

Let’s add some styles.

让我们添加一些样式。

# edit the scss styles file in your favorite editor.$ vim assets/scss/styles.scss $background-color: #cc0000;$title-color: #fff;div { text-align: center; background-color: $background-color; h1 { font-size: 64px; color: $title-color; } p { font-size: 24px; }}

Save your styles file and let’s get this thing running!

保存您的样式文件，让我们开始吧！

$ npm run start

Parcel will get everything setup on http://localhost:1234 in just a few seconds… and then…

Parcel将在几秒钟内在http：// localhost：1234上进行所有设置，然后……

Like we’re back in 1999. 就像我们回到1999年一样。

4.结束语+注释 (4. Final Words + Notes)

Congratulations! You have yourself a simple ReactJs project with TypeScript and SASS already setup so you can dive into the main development — with no configuration! Parcel does all of that for us, saving us a bunch of time.

恭喜你！您已经拥有一个带有TypeScript和SASS的简单ReactJs项目，因此您可以直接进入主要开发-无需配置！包裹为我们完成了所有这些工作，为我们节省了很多时间。

When you want to build for production, Parcel will compile and minify your source files into a dist/ folder that you can serve like static HTML. To do that, simply run:

当您要进行生产时，Parcel会将源文件编译并缩小到一个dist /文件夹中，您可以像静态HTML一样使用它。为此，只需运行：

$ npm run build # or parcel build ./index.html

Parcel will magically compile everything into that dist/ folder ( make sure to add this folder to your .gitignore , along with the .cache/ folder that Parcel generates in run-time. These can bloat your repository )

Parcel会将所有内容神奇地编译到该dist /文件夹中(确保将此文件夹以及Parcel在运行时生成的.cache /文件夹添加到您的.gitignore中。这些文件可能会使您的存储库膨胀)

Thanks for joining me in this quick get started walkthrough, it’s been a pleasure!

感谢您加入我的快速入门演练，这是我的荣幸！

翻译自: https://medium.com/@zactyh/reactjs-ts-sass-get-started-fast-really-fast-e111032261ca

ts 引入sass报错

Processed: 0.014, SQL: 8