I work with Bootstrap and I have this problem.
I have installed Grunt and compile only style.less but not the other files.
When I change something in file which is import to style.less it works only when I reeboot Grunt.
What could be wrong?
EDIT:
Below is my Gruntfile.js.
Gruntfile.js
module.exports = function(grunt) {
require('jit-grunt')(grunt);
grunt.initConfig({
less: {
development: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: {
"css/style.css": "less/style.less"
}
}
}, watch: {
styles: {
files: ['less/**/*.less'],
tasks: ['less'],
options: {
nospawn: true
}
}
}
});
grunt.registerTask('default', ['less', 'watch']);
};
My theme folder:
--bootstrap
--config
--css
-style.css
--fonts
--less
- component
- jquery-ui
bootstrap.less
overrides.less
style.less
variable-overrides.less
--node_modules
--templates
gruntfile.js
mytheme.info.yml
mytheme.libraries.yml
mytheme.theme
package.json
package-lock.json
services.yml
Many thanks
Related
I'm trying to control the filenaming of files produced from a Vue app with Webpack.
The environment where I want to host the built app doesn't like filenames with '.' (don't ask).
I have been able via get js files to comply with a 'hyphen' naming scheme by using output.filename in vue.config.js configureWebpack entry. But css files are not renamed.
As I am loading the two bulk packed files rather than chunks I can obviously manually rename the single css file. However when I run it I get an error
Error: Loading CSS chunk error failed.
(/my-path/resources/css/error.d0f9a634.css)
I'm hoping I can force all css files (including the error one) to be renamed by the build process.
My vue.config.js
module.exports = {
outputDir: path.resolve(__dirname, 'dist'),
publicPath: "/my-path/resources",
configureWebpack: {
optimization: {
splitChunks: false
},
output: {
filename: "[name]-js",
chunkFilename: "[name]-chunk-js",
// get cssFilename() {
// return "[name]-css";
// }
},
resolve: {
alias: {
'vue$': path.resolve('./node_modules/vue/dist/vue.common.js'),
},
},
},
// https://cli.vuejs.org/config/#productionsourcemap
productionSourceMap: false,
// https://cli.vuejs.org/config/#css-extract
css: {
extract: { ignoreOrder: true },
loaderOptions: {
sass: {
prependData: '#import \'~#/assets/scss/vuetify/variables\''
},
scss: {
prependData: '#import \'~#/assets/scss/vuetify/variables\';'
}
}
},
// ...
}
I have started to look at MiniCssExtractPlugin but not sure if that is the right direction to look. Any help appreciated.
I found a working solution for this via the css.extract element in vue.config.js.
configureWebpack: {
optimization: {
splitChunks: false
},
output: {
filename: "js/[name]-js",
chunkFilename: "js/[name]-chunk-js",
},
...
},
// https://cli.vuejs.org/config/#css-extract
css: {
extract: {
ignoreOrder: true,
filename: 'css/[name]-css',
chunkFilename: 'css/[name]-chunk-css',
},
loaderOptions: {
sass: {
prependData: '#import \'~#/assets/scss/vuetify/variables\''
},
scss: {
prependData: '#import \'~#/assets/scss/vuetify/variables\';'
}
}
},
...
Which as the documentation link for css.extract says
Instead of a true, you can also pass an object of options for the
mini-css-extract-plugin if you want to further configure what this
plugin does exactly
and is covered by the webpack mini-css-extract-plugin documentation
Normally, Vue CLI with vue.config.js places the .js and .css assets in /dist/[css|js]/. However, I want the .js and .css files in the root dist folder.
I can get the .js file in the root folder with the following config:
module.exports = {
productionSourceMap: false,
filenameHashing: false,
configureWebpack: {
optimization: {
splitChunks: false
}
},
chainWebpack: config => {
config.externals({
...config.get("externals"),
moment: "moment"
});
config.output.filename("[name].js");
}
};
How do I do this with the .css file?
This can be accomplished with the following Vue CLI config (from vuejs/vue-cli#1967):
// vue.config.js
module.exports = {
chainWebpack: (config) => {
config.module
.rule('images')
.use('url-loader')
.tap(options => Object.assign({}, options, { name: '[name].[ext]' }));
},
css: {
extract: {
filename: '[name].css',
chunkFilename: '[name].css',
},
},
configureWebpack: {
output: {
filename: '[name].js',
chunkFilename: '[name].js',
}
}
}
Having trouble using rollup-plugin-postcss with sapper-template:
npx degit sveltejs/sapper-template#rollup my-app
npm install rollup-plugin-postcss --save-dev
install various postcss plugin
create src/css/main.css
add import './css/main.css'; to the top line of src/client.js
*edit rollup.config.js
*add postcss.config.js
*going wrong here? I have tried several variations.
// rollup.config.js
...
import postcss from 'rollup-plugin-postcss'
...
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
dev,
hydratable: true,
emitCss: true
}),
resolve(),
commonjs(),
postcss({
// extract: true,
// sourceMap: true,
plugins: [require('autoprefixer')]
}),
...
// postcss.config.js
module.exports = {
plugins: {
...
autoprefixer: {}
}
};
No real error message, once I add postcss to the plugins in the client:{} of rollup.config.js - css breaks on the site.
This is a matter of simply putting the svelte plugin config together properly. I would recommend you use svelte-preprocess and setup your rollup.config.js as follows:
import autoPreprocess from 'svelte-preprocess';
const preprocessOptions = {
postcss: {
plugins: [
require('postcss-import'),
require('postcss-preset-env')({
stage: 0,
browsers: 'last 2 versions',
autoprefixer: { grid: true }
}),
...
]
}
};
...
export default {
client: {
plugins: [
svelte({
preprocess: autoPreprocess(preprocessOptions),
dev,
hydratable: true,
emitCss: true
}),
...
As you see here, you need to set the preprocess option of the svelte plugin.
I inherited a Vue project that only builds production builds and uglifies everything. It doesn't have a webpack.config.js like I'm used to, it only has a vue.config.js file. When I do npm run build it builds a production. The build command is "build": "vue-cli-service build" and I don't see a way to do something like --mode=development.
I tried adding a webpack.config.js file which built, but at the same time broke the webpage, because it no longer built the same.
Here is my vue.config.js file:
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
lintOnSave: true,
baseUrl: 'http://localhost:8080',
configureWebpack: {
entry: './src/main.js',
module: {
rules: [
{
test: /libs\.js$/,
use: {
loader: 'script-loader'
}
},
{
test: /angLibs\.js$/,
use: {
loader: 'script-loader'
}
},
{
test: /welcome\.js$/,
use: {
loader: 'script-loader'
}
},
{
test: /app\.js$/,
use: {
loader: 'script-loader'
}
}
]
},
output: {
publicPath: process.env.VUE_APP_ROOT_API + '/',
chunkFilename: '[name].bundle.js'
},
plugins: [
new CopyWebpackPlugin([
{ from: path.resolve(__dirname, './static/App/i18n/*.*'), to: path.resolve(__dirname, './dist/'), force: true }
], { copyUnmodified: true, context: 'static/' }),
new CopyWebpackPlugin([
{ from: path.resolve(__dirname, './static/Content/*/*.*'), to: path.resolve(__dirname, './dist/'), force: true }
], { copyUnmodified: true, context: 'static/' }),
new CopyWebpackPlugin([
{ from: path.resolve(__dirname, './static/fonts/*.*'), to: path.resolve(__dirname, './dist/'), force: true }
], { copyUnmodified: true, context: 'static/' }),
new CopyWebpackPlugin([
{ from: path.resolve(__dirname, './static/react/*.*'), to: path.resolve(__dirname, './dist/'), force: true }
], { copyUnmodified: true, context: 'static/' })
]
}
};
I would like to have a development build that is quicker and is not uglified/minified (or retains the map files of files it includes in the webpack).
That's a Vue CLI v3 build. For a webpack dev-server with hot-reload, use npm run serve.
Otherwise, you can build in development mode via
npx vue-cli-service build --mode development
or, if you don't have npx
./node_modules/.bin/vue-cli-service build --mode development
See https://cli.vuejs.org/guide/mode-and-env.html
Another option is to add a new script to package.json, eg
"buildDev": "vue-cli-service build --mode development"
and run
npm run buildDev
For configuring Webpack, see https://cli.vuejs.org/guide/webpack.html.
For example
// vue.config.js
module.exports = {
configureWebpack: {
// config goes here
}
}
I've created nuxt project
vue init nuxt/starter <project-name>
In my nuxt.config.js I added this:
css: [
{ src: '~assets/css/style.css', lang: 'css' }
]
and in my assets/css folder I have style.css
with
body {
background: black!important;
}
But nothing happens with no errors on console. what to I do?
you must add to nuxt.config.js
build: {
extractCSS: true
}
For example,
css: [
{ src: '~assets/css/style.css', lang: 'css' }
],
build: {
extractCSS: true
}
And use nuxt v0.10.6