1. 安装sass
安装sass，通过npm install node-sass -g
如果安装失败，就搜索 node-sass 安装失败，看别人的指导
https://zhuanlan.zhihu.com/p/37886736
最后，我是通过这个方法成功了✌️
2. 开始演示sass的用法
- 直接把原来的css文件改为scss文件
mv main.css main.scss - 翻译成css的方法
node-sass main.scss main.css
多了一个翻译出来的main.css文件 -
.scss嵌套规则
image.png
修改为下面这种嵌套的形式
image.png
还需要在运行翻译node-sass main.scss main.css - 自动翻译
node-sass main.scss main.css -w main.scss
可实现从main.sass变成main.css的自动化
3. 兼容IE
因为IE不支持let，采用自动化工具babel 来实现let转变成var
npm install --save-dev @babel/core @babel/cli
npm init
vim package.json
npm install --save-dev @babel/core @babel/cli
vim package.json发现多了一行"@babel/cli": "^7.5.5"
"devDependencies": {
"@babel/cli": "^7.5.5",
"@babel/core": "^7.5.5"
}
}
4. webpack的使用
mkdir webpack-demo
cd webpack-demo
npm init // 回车回车回车回车回车
// 推荐这个安装方式，webpack@3版本
npm install --save-dev webpack@3
touch webpack.config.js//配置webpack，创建 webpack.config.js 文件
vi webpack.config.js
创建 webpack.config.js 文件，写入如下代码：
const path = require('path')
module.exports = {
entry: './src/index.js', // 入口文件
output: {
path: path.resolve(__dirname, 'dist'), // 必须使用绝对地址，输出文件夹
filename: "bundle.js" // 打包后输出文件的文件名
}
}
mkdir src
touch src/index.js
npx webpack
bundle.js是把src目录下的index.js 翻译过去的。
现在开始写index.js 的内容vi src/index.js
alert(1)
运行
npx webpack
vi dist/bundle.js
可以查看到build文件夹的bundle.js里面包含了alert(1)
现在webpack已经具备简单的拷贝功能了，下面加功能
5. 让let变成var（需要安装babel-loader）
npm i --save-dev babel-loader@7 babel-core@6 babel-preset-env
vi webpack.config.js
更改webpack.config.js，加入这些代码
module.exports = {
// ......加个逗号，
module: {
rules: [
{
// js 文件才使用 babel
test: /\.js$/,
// 使用哪个 loader
use: 'babel-loader',
// 不包括路径
exclude: /node_modules/
}
]
}
}
配置好后，现在开始写index.js 的内容vi src/index.js
var a = 1
alert(a)
再次运行npx webpack就好了，babel就使用上了。
打开vi dist/bundle.js
6. 加模块化的东西
在src目录下，删除之前的.js文件，新建js目录，里面创建module-1.js module-2.js app.js
cd src
rm -rf *
mkdir js
cd js
touch module-1.js module-2.js app.js
vi module-1.js在module-1.js中写入
function fn(){
console.log(1)
}
export default fn
vi module-2.js在module-2.js中写入
function fn(){
console.log(2)
}
export default fn
app.js 要使用module-1.js 和module-2.js，vi app.js在app.js中写入
import x from './module-1'
import y from './module-2'
x()
console.log('funk webpack')
y()
app.js就可以调用module-1.js 和module-2.js中的fn了
然后我们需要改一下webpack的配置
cd ..
cd ..
vi webpack.config.js
'./src/index.js'修改为 './src/js/app.js'
'dist'修改为'dist/js/'
删除dist目录，重新webpack
mkdir dist/js
rm -rf dist
npx webpack
touch src/index.html
vi src/index.html
Document
把它考到dist里面cp src/index.html dist/index.html
打开页面http-server . -c-1
打开dist网页http://127.0.0.1:8080/dist
可以看到
7. 加 sass-loader 把 SCSS 转译为 CSS
cd src
mkdir css
cd css
touch main.scss
vi main.scss
在main.scss写入简单代码：
body{
background: red;
#app{
width:100px;
height: 100px;
border:2px solid green;
}
}
搜索webpack sass-loader
cd ..
cd ..
npm install sass-loader node-sass webpack --save-dev
vi webpack.config.js
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
}]
}
};
css-loader让css文件也支持引入，因为webpack中把所有的文件都当做模块
vi src/js/app.js
import '../css/main.scss'
npx webpack
遇到任何报错，都采用npm i 缺的loader，包括（css-loader style-loader sass-loader node-sass）直到成功
这个项目的github
这个示例项目的GitHub
注意：
touch .gitignore
vi .gitignore
在.gitignore中写入
node_modules
npm-debug.log
package-lock.json
对于已经提交到repo的代码，可以用如下命令进行移除：git rm -r -f --cached node_modules/
git add .gitignore
git commit -m "second commit"
git push