基于vue中css预加载使用sass的配置方式详解

基于vue中css预加载使用sass的配置方式详解

1.安装sass的依赖包

npm install --save-dev sass-loader

//sass-loader依赖于node-sass

npm install --save-dev node-sass

2.在build文件夹下的webpack.base.conf.js的rules里面添加配置，如下红色部分

{

test: /\.sass$/,

loaders: ['style', 'css', 'http://sass']

}

// module用来解析不同的模块

module: {

rules: [

...(config.dev.useEslint ? [createLintingRule()] : []),

{

test: /\.vue$/,

// 也就是说，对.js和.vue文件在编译之前进行检测，检查有没有语法错误'eslint-loader'

// enforce: 'pre'选项可以确保，eslint插件能够在编译之前检测，如果不添加此项，就要把这个配置项放到末尾，确保第一个执行

// 对vue文件使用vue-loader，该loader是vue单文件组件的实现核心，专门用来解析.vue文件的

loader: 'vue-loader',

// 将vueLoaderConfig当做参数传递给vue-loader,就可以解析文件中的css相关文件

options: vueLoaderConfig

},

{

test: /\.js$/,

// 对js文件使用babel-loader转码,该插件是用来解析es6等代码

loader: 'babel-loader',

// 指明src和test目录下的js文件要使用该loader

include: [resolve('src'), resolve('test')]

},

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

// 对图片相关的文件使用 url-loader 插件，这个插件的作用是将一个足够小的文件生成一个64位的DataURL

// 可能有些老铁还不知道 DataURL 是啥，当一个图片足够小，为了避免单独请求可以把图片的二进制代码变成64位的

// DataURL，使用src加载，也就是把图片当成一串代码，避免请求，神不神奇？？

loader: 'url-loader',

options: {

// 限制 10000 个字节一下的图片才使用DataURL

limit: 10000,

name: utils.assetsPath('img/[name].[hash:7].[ext]')

}

},

{

test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,

// 字体文件处理，和上面一样

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('media/[name].[hash:7].[ext]')

}

},

{

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

loadsatRfeQer: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('fonts/[name].[hash:7].[http://ext]')

}

},

{

test: /\.sass$/,

loadesatRfeQrs: ['style', 'css', 'sass']

}

]

},

3.修改模板里面的style lang="scss";例如模板红色标记

4.npm run dev

5.效果

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。